<template>
  <view class="flex-table">
    <view class="flex-tr">
      <view class="flex-td--label">申请单位</view>
      <view class="flex-td--value flex-center" style="flex: none; width: 240px">{{ ticket.applyUnitName }}</view>
      <view class="flex-td--label">作业单位</view>
      <view class="flex-td--value flex-center">{{ ticket.unitName }}</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">生产单位工艺负责人</view>
      <view class="flex-td--value" style="display: block; flex: none; width: 240px">
        <image
          v-for="imgItem in unitOpinionSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, unitOpinionSignatures)"
        ></image>
      </view>
      <view class="flex-td--label">作业类别</view>
      <view class="flex-td--value flex-center">
        {{ detail.workModality[0].blandPlateTypeLabel }}
      </view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">设备、管道名称</view>
      <view
        class="flex-td--value"
        style="
          display: block;
          flex: none;
          width: 350px;
          border-right: 1px solid #124264;
          background-color: #f1f1f1;
          padding: 0;
        "
      >
        <view class="text-center" style="border-bottom: 1px solid #124264; height: 30px; line-height: 30px">
          管道参数
        </view>
        <view class="flex" style="height: 30px">
          <view class="flex-auto text-center" style="border-right: 1px solid #124264; height: 30px; line-height: 30px">
            介质
          </view>
          <view class="flex-auto text-center" style="border-right: 1px solid #124264; height: 30px; line-height: 30px">
            温度
          </view>
          <view class="flex-auto text-center" style="height: 30px; line-height: 30px">压力</view>
        </view>
      </view>

      <view
        class="flex-td--value"
        style="
          display: block;
          flex: none;
          width: 350px;
          border-right: 1px solid #124264;
          background-color: #f1f1f1;
          padding: 0;
        "
      >
        <view class="text-center" style="border-bottom: 1px solid #124264; height: 30px; line-height: 30px">
          盲板参数
        </view>
        <view class="flex" style="height: 30px">
          <view class="flex-auto text-center" style="border-right: 1px solid #124264; height: 30px; line-height: 30px">
            材质
          </view>
          <view class="flex-auto text-center" style="border-right: 1px solid #124264; height: 30px; line-height: 30px">
            规格
          </view>
          <view class="flex-auto text-center" style="height: 30px; line-height: 30px">编号</view>
        </view>
      </view>

      <view class="flex-td--value flex-center" style="background-color: #f1f1f1">实际作业开始时间</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label" style="background: transparent">{{ detail.equipmentPipeName }}</view>
      <view
        class="flex-td--value"
        style="display: block; flex: none; width: 350px; border-right: 1px solid #124264; padding: 0"
      >
        <view class="flex" style="height: 100%">
          <view class="flex-auto flex flex-center" style="border-right: 1px solid #124264; height: 100%">
            {{ detail.medium }}
          </view>
          <view class="flex-auto flex flex-center" style="border-right: 1px solid #124264; height: 100%">
            {{ detail.temperature }}℃
          </view>
          <view class="flex-auto flex flex-center" style="height: 100%">{{ detail.pressure }}Mpa</view>
        </view>
      </view>

      <view
        class="flex-td--value"
        style="display: block; flex: none; width: 350px; border-right: 1px solid #124264; padding: 0"
      >
        <view class="flex" style="height: 100%">
          <view class="flex-auto flex flex-center" style="border-right: 1px solid #124264; height: 100%">
            {{ detail.material }}
          </view>
          <view class="flex-auto flex flex-center" style="border-right: 1px solid #124264; height: 100%">
            {{ detail.specification }}
          </view>
          <view class="flex-auto flex flex-center" style="height: 100%">
            {{ detail.serialNumber }}
          </view>
        </view>
      </view>

      <view class="flex-td--value flex-center">
        {{ ticket.actualStartTime ? $u.timeFormat(ticket.actualStartTime, 'mm月dd日hh时MM分') : '' }}
      </view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--value" style="line-height: 24px; border-left: 1px solid #124264">
        <view>盲板位置图（可另附图）及编号：</view>
        <view>{{ detail.serialNumber }}</view>
        <view v-if="detail.image">
          <image
            :src="`${staticUrl}${detail.image}`"
            mode="aspectFill"
            class="complete__img"
            @click="handlePreviewImage(`${staticUrl}${detail.image}`)"
          ></image>
        </view>
        <view class="text-right">
          <text>编制人：{{ detail.creatorLabel }}</text>
          <text class="pl-12">{{ $u.timeFormat(detail.createTime, 'yyyy 年 mm 月 dd 日') }}</text>
        </view>
      </view>
    </view>

    <view class="flex-tr">
      <view class="flex-td--label">监护人</view>
      <view class="flex-td--value" style="display: block">
        <image
          v-for="imgItem in guardianSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, guardianSignatures)"
        ></image>
      </view>
      <view class="flex-td--label">作业负责人</view>
      <view class="flex-td--value" style="display: block; width: 100px; flex: none">
        <image
          v-for="imgItem in operationManagerSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, operationManagerSignatures)"
        ></image>
      </view>
      <view class="flex-td--label">作业人</view>
      <view class="flex-td--value" style="display: block">
        <image
          v-for="imgItem in operatorAcceptConfessionsSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, operatorAcceptConfessionsSignatures)"
        ></image>
      </view>
    </view>

    <view class="flex-tr">
      <view class="flex-td--label">关联的其他特殊作业及安全作业票编号</view>
      <view class="flex-td--value flex-center">{{ relevanceTicketLabel }}</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">风险辨识结果</view>
      <view class="flex-td--value flex-center">{{ ticket.riskIdentificationResultLabel }}</view>
    </view>
  </view>
</template>
<script>
import ticketTableMixin from './ticketTableMixin'
import { actNodeTypeEnum } from '@/utils/constant'
export default {
  mixins: [ticketTableMixin],
  props: {
    ticketId: [Number, String],
    detail: {
      type: Object,
      default: () => ({})
    },
    inspect: {
      type: Object,
      default: () => ({})
    },
    signatures: {
      type: Array,
      default: () => []
    },
    ticket: {
      type: Object,
      default: () => ({})
    },
    relevanceTicketLabel: String,
    riskIdentificationResult: String,
    actualDateLabel: String
  },
  computed: {
    approveSignatures() {
      if (!this.inspect || !this.inspect[actNodeTypeEnum.SP]) {
        return []
      }
      if (this.inspect[actNodeTypeEnum.SP].length >= 2) {
        const result = []
        this.inspect[actNodeTypeEnum.SP][1].signatures?.forEach((item2) => {
          const signatureUrls = item2.signatureUrls.split(',')
          result.push(...signatureUrls)
        })

        return result
      }
      return []
    }
  }
}
</script>
<style scoped lang="scss">
@import './style.scss';
</style>
